<template>
  <div class="con" v-loading="loading">
      <div class="user">
         <div class="title">
             <div class="search"   style="position: relative;">
                 <el-input v-model="cusinfo" placeholder="客户姓名电话查找 " size="small"></el-input>
                 <i class="el-icon-search" @click="getCusInfo()" style="position: absolute; width:40px;height:32px;right:0;top:0;text-align:center;line-height:32px"></i>
             </div>
                <i class="el-icon-sort searBtn" @click="fnSortModel()" style="color:#409EFF;"></i>
            <el-dropdown class="down"  trigger="click">
                <span class="el-dropdown-link">
                    <i class="icon icon-caidan"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <router-link to="/addCus"><el-dropdown-item>添加</el-dropdown-item></router-link>
                    <el-dropdown-item><span  @click="fnShowModel()" style="display:inline-block;width:100%;height:100%;">查找</span></el-dropdown-item>
                    <el-dropdown-item><span  @click="fnClearScreen()" style="display:inline-block;width:100%;height:100%;">清除筛选</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
         </div>
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="list">
                <div class="item"  v-for="(item,index) in datas" :key="item.ID">
                    <div class="row clearfix">
                        <div class="left">
                            <span>姓名：</span>
                            <span class="gray">{{item.CNName}}</span>
                        </div>
                        <div class="right">
                            <span>性别：</span>
                            <span v-if="item.Gender=='1'||item.Gender=='男'" class="gray">男</span>
                            <span v-else class="gray">女</span>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="left">
                            <span>项目：</span>
                            <span class="gray">{{item.ProjectName}}</span>
                        </div>
                        <div class="right">
                            <span>电话：</span>
                            <span class="gray">{{item.Tel}}</span>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="left">
                            <span>年龄：</span>
                            <span class="gray">{{item.Age}}</span>
                        </div>
                        <div class="right">
                            <span>区域：</span>
                            <span class="gray">{{item.DistrictName}}</span>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="left">
                            <span>业务员：</span>
                            <span class="gray">{{item.SalesName}}</span>
                        </div>
                        <div class="right">
                            <span>交易：</span>
                            <span class="gray" v-if="item.IsTrans">是</span>
                            <span class="gray" v-else>否</span>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <span>创建时间：</span>
                        <span class="gray">{{item.CreateDate}}</span>
                    </div>
                    <div class="line clearfix">
                        <div class="left">
                            <router-link v-bind="{to:'/Visit/'+item.ID}">
                            <i class="icon icon-iconfontdaigoutong"></i>
                            <span>回访</span>
                            </router-link>
                        </div>
                        <div class="right">
                            <router-link v-bind="{to:'/editCus/'+item.ID}">
                            <i class="icon icon-xiangqing"></i>
                            <span>详情</span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
          </mt-loadmore>
      </div>
      <div class="model" v-show="ShowModel">
          <div class="prop" v-show="ShowLookup">
                <div class="rows clearfix">
                    <span>客户</span>
                    <div class="inp">
                        <el-input v-model="sear.custom" placeholder="请输入内容" size="small"></el-input>
                    </div>
                </div>
                <div class="rows clearfix">
                    <span>项目</span>
                    <div class="inp">
                        <el-select v-model="provalue" filterable multiple placeholder="请选择" size="small">
                            <el-option
                            v-for="item in sear.prolist"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <!-- <div class="rows clearfix">
                    <span>时间</span>
                    <div class="inp">
                        <el-date-picker
                            v-model="sear.dates1"
                            type="date"
                            placeholder="选择开始时间"
                            size="small">
                        </el-date-picker>
                    </div>
                </div>
                <div class="rows clearfix">
                    <span></span>
                    <div class="inp">
                        <el-date-picker
                            v-model="sear.dates2"
                            type="date"
                            placeholder="选择结束时间"
                            size="small">
                        </el-date-picker>
                    </div>
                </div> -->
                <div class="rows clearfix">
                    <span>
                    </span>
                    <div class="inp">
                        <el-checkbox v-model="sear.IsTrans">交易</el-checkbox>
                    </div>
                </div>
                <div class="rows clearfix">
                    <el-button @click="fnCancel()" size="mini">取消</el-button>
                    <el-button @click="fnSub()" type="primary" size="mini">确定</el-button>
                </div>
          </div>
          <div class="prop" v-show="ShowSort">
                <el-radio v-model="sort" label="CNName">客户</el-radio>
                <el-radio v-model="sort" label="ProjectID">项目</el-radio>
                <el-radio v-model="sort" label="SalesID">业务员</el-radio>
                <el-radio v-model="sort" label="CreateDate">时间</el-radio>
                <div class="rows" style="margin-top:20px;">
                    <el-button @click="fnCancel()" size="mini">取消</el-button>
                    <el-button @click="fnSubSort()" type="primary" size="mini">确定</el-button>
                </div>
                
          </div>
      </div>
      <div class="tabbar">
          <div class="pere">
              <div class="cho">
                    <router-link to="/register">
                        <div style="width:100%;">
                            <i class="icon icon-dengji"></i>
                            <span>到访登记</span>
                        </div>
                    </router-link>
              </div>
              <div class="cho active">
                  <router-link to="/Customer">
                    <div style="width:100%;">
                        <i class="icon icon-kehuguanli"></i>
                        <span>客户管理</span>
                    </div>
                  </router-link>
              </div>
              <div class="cho">
                    <router-link to="/home">
                    <div style="width:100%;">
                        <i class="icon icon-icon-test"></i>
                        <span>用户中心</span>
                    </div>
                  </router-link>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "Customer",
  data() {
    return {
      allLoaded: false,//true禁止上拉,
      scrollMode:"auto",//移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      pageIndex: 0,
      loading: false,
      ShowModel: false, //遮罩model
      ShowLookup: false, //查找
      ShowSort: false, //排序
      sort: "CreateDate", //排序选项
      cusinfo: "", //客户信息
      datas: [],
      sear: {
        custom: "", //客户
        prolist: [], //项目列表
        dates1: "", //开始时间
        dates2: "", //结束时间
        IsTrans: false //是否交易
      },
      provalue: [],
      temp: []
    };
  },
  mounted() {
    this.getCuslist();
  },
  methods: {
    //获取客户列表
    getCuslist() {
      var me = this;
      me.loading = true;
      this.$axios
        .post(Api.getcustomerlist, {
          Para: {
            ProjectIDs: [],
            ListType: 1,
            IsTrans: me.sear.IsTrans,
            KeyWord: ""
          },
          PageSize: 3,
          PageIndex: me.pageIndex,
          OrderbyString: me.sort
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            if (me.pageIndex == 0) {
              // 重置下拉状态
              me.$refs.loadmore.onTopLoaded();
              // 直接赋值第一页的数据
              me.datas = res.data.data.Data;
            } else {
              // 重置上拉状态
              if (res.data.data.Data.length==0) {
                me.allLoaded = true;
              }
              me.$refs.loadmore.onBottomLoaded();
              me.datas = me.datas.concat(res.data.data.Data);
            }

          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              me.loading = false;
              me.$router.push("/Login");
            } else {
              me.loading = false;
              me.$message.error(res.data.msg);
            }
          }
        });
    },
    //获取项目列表
    getProjectList() {
      var me = this;
      this.sear.prolist = [];
      this.$axios
        .post(Api.getprojectlist, {
          Para: "",
          PageSize: 10000,
          PageIndex: 0,
          OrderbyString: ""
        })
        .then(res => {
          if (res.data.isOK) {
            for (var i = 0; i < res.data.data.Data.length; i++) {
              //项目
              me.sear.prolist.push({
                value: res.data.data.Data[i].ID,
                label: res.data.data.Data[i].PName
              });
            }
          } else {
            me.$message.error(res.data.msg);
          }
        });
    },

    loadTop() {
      // 下拉刷新
      this.pageIndex = 0;
      this.getCuslist();
    },
    loadBottom() {
      // 上拉加载
      this.pageIndex++;
      this.getCuslist();
    },

    //显示查找model
    fnShowModel() {
      this.ShowModel = true;
      this.ShowLookup = true;
      this.getProjectList();
    },
    //显示排序model
    fnSortModel() {
      this.ShowModel = true;
      this.ShowSort = true;
    },
    //取消
    fnCancel() {
      this.ShowModel = false;
      this.ShowLookup = false;
      this.ShowSort = false;
    },
    //查找确认
    fnSub() {
      this.ShowModel = false;
      this.ShowLookup = false;
      var me = this;
      me.loading = true;

      this.$axios
        .post(Api.getcustomerlist, {
          Para: {
            ProjectIDs: me.provalue,
            ListType: 1,
            IsTrans: me.sear.IsTrans,
            KeyWord: me.sear.custom
          },
          PageSize: 10,
          PageIndex: 0,
          OrderbyString: me.sort
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            me.datas = res.data.data.Data;
          } else {
            me.loading = false;
            me.$message.error(res.data.msg);
          }
        });
    },
    //根据项目和客户电话查找客户
    getCusInfo() {
      var me = this;
      me.loading = true;
      this.$axios
        .post(Api.getcustomerlist, {
          Para: {
            ProjectIDs: [],
            ListType: 1,
            IsTrans: me.sear.IsTrans,
            KeyWord: me.cusinfo
          },
          PageSize: 4,
          PageIndex: 0,
          OrderbyString: me.sort
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            me.datas = res.data.data.Data;
          } else {
            me.loading = false;
            me.$message.error(res.data.msg);
          }
        });
    },
    //确认排序
    fnSubSort() {
      this.ShowSort = false;
      this.ShowModel = false;
      var me = this;
      me.loading = true;
      this.$axios
        .post(Api.getcustomerlist, {
          Para: {
            ProjectIDs: [],
            ListType: 1,
            IsTrans: me.sear.IsTrans,
            KeyWord: ""
          },
          PageSize: 4,
          PageIndex: 0,
          OrderbyString: me.sort
        })
        .then(res => {
          if (res.data.isOK) {
            me.loading = false;
            me.datas = res.data.data.Data;
          } else {
            me.loading = false;
            me.$message.error(res.data.msg);
          }
        })
        .catch(function(error) {
          me.$message.error("数据拉去失败");
        });
    },
    //清除筛选
    fnClearScreen() {
      this.sort = "CreateDate";
      this.provalue = [];
      this.cusinfo = "";
      this.sear={
        custom: "", //客户
        prolist: [], //项目列表
        dates1: "", //开始时间
        dates2: "", //结束时间
        IsTrans: false //是否交易
      },
      //重新调用客户列表接口
      this.getCuslist();
    }
  }
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.con {
  position: relative;
  width: 100%;
  height: 100%;
}
.topnav {
  width: 100%;
  height: 45px;
  background-color: #35495e;
  line-height: 45px;
  color: #ffffff;
}
.topnav i {
  font-size: 25px;
  vertical-align: middle;
}
.topnav span {
  display: inline-block;
  height: 100%;
}
.user {
  width: 100%;
  height: calc(100% - 4.2rem);
}
.user .title {
  position: fixed;
  z-index: 1000;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.2rem;
  clear: both;
  border: 1px solid #e6ebf5;
  background-color: #f7f7fa;
}
.user .search {
  display: inline-block;
  width: 70%;
  float: left;
}
.user .searBtn {
  width: 10%;
}
.user .down {
  width: 10%;
}
.user .title i {
  font-size: 1.5rem;
  color: #409EFF;
  line-height: 2.6rem;
}
.user .list {
  margin-bottom: 4.2rem;
  margin-top: 3rem;
  padding: 0.5rem;
}
.user .list .item {
  border: 1px solid #cfdbe2;
  border-top-width: 3px;
  border-radius: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}
.user .list .item .line {
  border-top: 1px solid #cfdbe2;
  padding: 0.5rem 0;
  font-size: 1.2rem;
}
.user .list .item .line a {
  color: #000;
}
.user .list .item .left {
  width: 50%;
  display: inline-block;
  float: left;
}
.user .list .item .right {
  width: 50%;
  display: inline-block;
  float: right;
}

.row {
  line-height: 2.7rem;
  color: #2d2f33;
  font-size: 1.2rem;
  text-align: left;
  padding: 0 1rem;
}
.row span {
  display: inline-block;
  text-align: left;
}

.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4.2rem;
  border-top: 1px solid #c0bfc4;
  background-color: #f7f7fa;
}

.pere {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
}
.pere .cho {
  list-style: none;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  font-size: 1rem;
  margin-top: 0.6rem;
}
.pere .cho.active {
  color: #409eff;
}
.pere .cho.active i {
  color: #409eff !important;
}
.pere .cho.active span {
  color: #409eff;
}
.pere .cho i {
  display: block;
  font-size: 2rem;
  color: #999;
}
.pere .cho span {
  display: block;
  font-size: 0.5rem;
  color: #999;
}

.gray {
  color: #999;
}

.clearfix:after {
  content: ".";
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
  overflow: hidden;
}

.model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
}
.model .prop {
  width: 95%;
  background: #ffffff;
  margin: auto;
  border-radius: 0.5rem;
  margin-top: 1rem;
  padding: 1rem 0;
}

.model .prop .rows {
  min-height: 2.5rem;
  padding: 0 1rem;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.model .prop .rows span {
  display: block;
  float: left;
  width: 25%;
  font-size: 1.2rem;
  height: 2.5rem;
  line-height: 3rem;
  text-indent: 0.5rem;
}
.model .prop .rows .inp {
  float: right;
  width: 73%;
  height: 100%;
  line-height: 3rem;
  font-size: 1rem;
}
.model .prop .rows .inp label {
  line-height: 2.5rem;
  float: left;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-radio + .el-radio {
  margin-left: 1rem;
}
.el-select {
  width: 100%;
}
</style>
